<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-button @click="visible=true" type="primary"> <i class="el-icon-plus"></i> 事件上报</el-button>
        <el-form :model="filters" inline style="float:right;display:inline-block">
          <el-form-item>
            <el-input v-model="filters.id" placeholder="请输入工单编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.name" placeholder="请输入客户姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.orderType" placeholder="请选择工单类型">
              <el-option v-for="(v,i) in Types" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="flush">刷新</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table border :data="List">
          <el-table-column v-for="(v,i) in props" :key="i" :prop="v.name" v-if="i<props.length-3" :label="v.label" align="center">
            <template scope="scope">
              <span :style="'color:'+getColor(scope.row)">{{scope.row[v.name]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="orderID=scope.row.orderID,visible4=true">查看详情</el-button>
              <el-button v-if="scope.row.orderStatus=='已派发，待处理'" style="color:orangered" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination style="margin-top:10px;float:right" layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="上报事件" :visible.sync="visible" top="5%">
      <el-form ref="form" :rules="rules" :model="form" label-suffix=":" label-width="120px">
        <el-form-item v-for="(v,i) in props" v-if="v.name!='orderStatus'" :key="i" :label="v.label" :prop="v.name">
          <template v-if="v.name=='customerGender'">
            <el-select v-model="form[v.name]" placeholder="">
              <el-option v-for="(v,i) in Sexs" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
          </template>
          <template v-else-if="v.name=='orderType'">
            <el-select v-model="form[v.name]" placeholder="">
              <el-option v-for="(v,i) in Types" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
          </template>
          <template v-else-if="v.name=='createTime'||v.name=='planTime'">
            <el-date-picker type="datetime" v-model="form[v.name]" placeholder=""></el-date-picker>
          </template>
          <template v-else-if="v.name=='content'||v.name=='remark'||v.name=='suggestion'">
            <el-input style="width:400px" type="textarea" v-model="form[v.name]" placeholder=""></el-input>
          </template>
          <template v-else>
            <el-input v-model="form[v.name]" placeholder="" style="width:300px"></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="$refs.form.resetFields()">重置</el-button>
          <el-button type="primary" @click="save">提交(派发)</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑事件" :visible.sync="visible2" top="5%">
      <el-form ref="editForm" :model="editForm" label-suffix=":" label-width="120px">
        <el-form-item v-for="(v,i) in props" v-if="v.name!='orderStatus'" :key="i" :label="v.label" :prop="v.name">
          <template v-if="v.name=='customerGender'">
            <el-select v-model="editForm[v.name]" placeholder="">
              <el-option v-for="(v,i) in Sexs" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
          </template>
          <template v-else-if="v.name=='orderType'">
            <el-select v-model="editForm[v.name]" placeholder="">
              <el-option v-for="(v,i) in Types" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
          </template>
          <template v-else-if="v.name=='createTime'||v.name=='planTime'">
            <el-date-picker type="datetime" v-model="editForm[v.name]" placeholder=""></el-date-picker>
          </template>
          <template v-else-if="v.name=='content'||v.name=='remark'||v.name=='suggestion'">
            <el-input style="width:400px" type="textarea" v-model="editForm[v.name]" placeholder=""></el-input>
          </template>
          <template v-else>
            <el-input v-model="editForm[v.name]" placeholder="" style="width:300px"></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="visible2=false">取消</el-button>
          <el-button type="primary" @click="update">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="事件派发" :visible="visible3" :show-close="false">
      <fieldset style="width:625px;margin-left:160px;margin-bottom:20px">
        <legend>检索负责人</legend>
        <div style="margin-top:20px">
          <el-input v-model="filter.key" style="width:450px" placeholder="请输入负责人查询信息(输入姓名、身份证、电话、部门均可)"></el-input>
          <el-button type="primary" @click="search2">查询</el-button>
        </div>
      </fieldset>
      <fieldset style="width:500px;margin-left:160px;margin-bottom:20px">
        <legend>事件派发单</legend>
        <el-form :model="pform" ref="form2" label-width="80px">
          <el-form-item label="派发者" style="width:600px" prop="userID">
            {{$store.getters.user.userName}}
          </el-form-item>
          <el-form-item label="负责人" style="width:600px">
            <el-input disabled v-model="result.nameB" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="pform.startTime" placeholder=""></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="pform.endTime" placeholder=""></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" style="width:600px">
            <el-input type="textarea" v-model="pform.remark" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="paifa('form2')">派发</el-button>
          </el-form-item>
        </el-form>
      </fieldset>
    </el-dialog>

    <el-dialog title="检索结果" :visible.sync="dialogVisible">
      <div>
        <el-table :data="memberInfo" border>
          <el-table-column prop="userID" label="编号"></el-table-column>
          <el-table-column prop="realName" label="真实姓名"></el-table-column>
          <el-table-column prop="certID" label="身份证"></el-table-column>
          <el-table-column prop="dept" label="所属部门"></el-table-column>
          <el-table-column label="选择">
            <template scope="scope">
              <input @click="selectMember(scope.row.realName,scope.row.userID)" type="radio" name="check">
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看详情" top="5%" :visible.sync="visible4">
      <info :id="orderID" />
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/12345";
import * as api2 from "@/api/securityManage";
import * as socket from "@/api";
import * as util from "@/utils";
import info from "./info";
export default {
  components: {
    info
  },
  data() {
    return {
      result: {
        nameA: "",
        nameB: ""
      },
      filter: {
        key: "",
        isPF: 1
      },
      rules: {
        orderID: [
          {
            required: true,
            message: "此选项不可为空!",
            trigger: "blur"
          }
        ],
        createTime: [
          {
            type: "date",
            required: true,
            message: "此选项不可为空!",
            trigger: "blur"
          }
        ],
        planTime: [
          {
            type: "date",
            required: true,
            message: "此选项不可为空!",
            trigger: "blur"
          }
        ]
      },
      visible: false,
      visible2: false,
      visible3: false,
      visible4: false,
      dialogVisible: false,
      filters: {
        id: "",
        name: "",
        type: "",
        page: 1,
        pageSize: 10,
        person: -1
      },
      total: 0,
      List: [],
      memberInfo: [],
      form: {
        orderID: "",
        orderStatus: "01",
        customerName: "",
        customerGender: "",
        customerContact: "",
        orderSource: "",
        createTime: "",
        orderType: "",
        planTime: "",
        content: "",
        remark: "",
        suggestion: "",
        reportPerson: 1
      },
      editForm: {
        orderID: "",
        orderStatus: "",
        customerName: "",
        customerGender: "",
        customerContact: "",
        orderSource: "",
        createTime: "",
        orderType: "",
        planTime: "",
        content: "",
        remark: "",
        suggestion: ""
      },
      props: [
        {
          name: "orderID",
          label: "工单编号"
        },
        {
          name: "orderStatus",
          label: "工单状态"
        },
        {
          name: "customerName",
          label: "客户姓名"
        },
        {
          name: "customerGender",
          label: "客户性别"
        },
        {
          name: "customerContact",
          label: "联系号码"
        },
        {
          name: "orderSource",
          label: "工单来源"
        },
        {
          name: "createTime",
          label: "创建时间"
        },
        {
          name: "orderType",
          label: "工单类型"
        },
        {
          name: "planTime",
          label: "计划完成时间"
        },
        {
          name: "content",
          label: "内容描述"
        },
        {
          name: "remark",
          label: "备注"
        },
        {
          name: "suggestion",
          label: "处理意见"
        }
      ],
      Types: [
        {
          name: "投诉",
          value: "投诉"
        },
        {
          name: "咨询",
          value: "咨询"
        },
        {
          name: "求助",
          value: "求助"
        }
      ],
      Sexs: [
        {
          name: "男",
          value: "男"
        },
        {
          name: "女",
          value: "女"
        },
        {
          name: "未知的性别",
          value: "未知的性别"
        },
        {
          name: "未说明性别",
          value: "未说明性别"
        }
      ],
      Status: [
        {
          value: "01",
          type: "已派发，待处理"
        },
        {
          value: "02",
          type: "处理中"
        },
        {
          value: "03",
          type: "已处理"
        }
      ],
      pform: {
        orderID: "",
        userID: -1,
        acceptedUserID: "",
        startTime: "",
        endTime: "",
        remark: ""
      },
      id: "",
      orderID: -1
    };
  },
  methods: {
    flush() {
      Object.keys(this.filters).forEach(key => {
        this.filters[key] = null;
      });
      this.filters.page = 1;
      this.filters.pageSize = 10;
      this.search();
    },
    getColor(row) {
      if (row.orderStatus != "已处理") {
        let date = new Date(row.planTime);
        let day = parseInt(
          (date.getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24
        );
        if (day <= 2 && day >= -0) {
          return "orangered";
        } else if (day < 0) {
          return "#F56C6C";
        }
      } else {
        return "black";
      }
    },
    cancel() {
      this.pform.acceptedUserID = this.id = null;
      this.dialogVisible = false;
    },
    sure() {
      this.pform.acceptedUserID = this.id;
      this.dialogVisible = false;
    },
    selectMember(name, id) {
      this.result.nameB = name;
      this.id = id;
    },
    handleCurrentChange(val) {
      this.filters.page = val;
      this.search();
    },
    search2() {
      this.dialogVisible = true;
      api2.getUserInfoByKey(this.filter).then(res => {
        this.memberInfo = res.data;
      });
    },
    edit(row) {
      this.editForm = { ...row };
      this.visible2 = true;
    },
    paifa() {
      this.pform.orderID = this.form.orderID;
      this.pform.startTime = util.parseTime(this.pform.startTime);
      this.pform.endTime = util.parseTime(this.pform.endTime);
      let t = this;
      if (
        this.pform.acceptedUserID !== "" &&
        this.pform.acceptedUserID !== null
      ) {
        this.$confirm("是否确认派发此事件,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            api.addDistribute(this.pform).then(res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "派发成功！"
                });
                let that = this;
                this.visible3 = false;
                this.search();
              } else {
                this.$message({
                  type: "error",
                  message: "派发失败"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消派发"
            });
          });
      }
    },
    getStatus(name) {
      let v = "";
      this.Status.forEach(m => {
        if (m.type == name) {
          v = m.value;
          return;
        }
      });
      return v;
    },
    async update() {
      this.editForm.orderStatus = this.getStatus(this.editForm.orderStatus);
      this.editForm.createTime = util.parseTime(this.editForm.createTime);
      this.editForm.planTime = util.parseTime(this.editForm.planTime);
      let { data } = await api.updateOrderInfo(this.editForm);
      if (data) {
        this.$message({
          message: "更新成功!",
          type: "info"
        });
        this.visible2 = false;
        this.search();
      }
    },
    async search() {
      let { data } = await api.getOrderInfo(this.filters);
      this.List = data.list;
      this.total = data.total;
    },
    async save() {
      let copy = { ...this.form };
      copy.createTime = util.parseTime(copy.createTime);
      copy.planTime = util.parseTime(copy.planTime);
      this.$refs.form.validate(async valid => {
        if (valid) {
          let { data } = await api.addOrderInfo(copy);
          if (data == true) {
            this.$message({
              message: "添加成功！",
              type: "info"
            });
            this.search();
            this.visible = false;
            this.visible3 = true;
          } else {
            this.$message({
              message: "添加失败，可能是工单重复！",
              type: "error"
            });
          }
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    this.filters.person = this.$store.getters.user.userID;
    this.form.reportPerson = this.$store.getters.user.userID;
    this.pform.userID = this.$store.getters.user.userID;
    this.search();
  }
};
</script>

<style scoped>
</style>
